<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib  prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>用户注册</title>
		<link rel="stylesheet" type="text/css" href="<%=path%>/css/style.css" />
		<script src="js/authcode.js" type="text/javascript"></script>
		<style type="text/css">
#login-page P {
	PADDING-TOP: 15px
}

#login-page P#error {
	PADDING-RIGHT: 10px;
	PADDING-LEFT: 10px;
	BACKGROUND: #ffd7d7;
	PADDING-BOTTOM: 4px;
	MARGIN: 10px 0px 0px;
	PADDING-TOP: 4px;
	TEXT-ALIGN: center;
	webkit-border-radius: 5px
}

#login-page P#notice {
	PADDING-RIGHT: 10px;
	PADDING-LEFT: 10px;
	BACKGROUND: #ffd7d7;
	PADDING-BOTTOM: 4px;
	MARGIN: 10px 0px 0px;
	PADDING-TOP: 4px;
	TEXT-ALIGN: center;
	webkit-border-radius: 5px
}

#login-page INPUT#username {
	BORDER-RIGHT: #ccc 1px solid;
	PADDING-RIGHT: 4px;
	BORDER-TOP: #ccc 1px solid;
	PADDING-LEFT: 4px;
	FONT-WEIGHT: bold;
	FONT-SIZE: 1.1em;
	PADDING-BOTTOM: 4px;
	BORDER-LEFT: #ccc 1px solid;
	WIDTH: 100%;
	PADDING-TOP: 4px;
	BORDER-BOTTOM: #ccc 1px solid;
	FONT-FAMILY: Helvetica, Arial, sans-serif
}

#login-page INPUT#password1 {
	BORDER-RIGHT: #ccc 1px solid;
	PADDING-RIGHT: 4px;
	BORDER-TOP: #ccc 1px solid;
	PADDING-LEFT: 4px;
	FONT-WEIGHT: bold;
	FONT-SIZE: 1.1em;
	PADDING-BOTTOM: 4px;
	BORDER-LEFT: #ccc 1px solid;
	WIDTH: 100%;
	PADDING-TOP: 4px;
	BORDER-BOTTOM: #ccc 1px solid;
	FONT-FAMILY: Helvetica, Arial, sans-serif
}

#login-page INPUT#password2 {
	BORDER-RIGHT: #ccc 1px solid;
	PADDING-RIGHT: 4px;
	BORDER-TOP: #ccc 1px solid;
	PADDING-LEFT: 4px;
	FONT-WEIGHT: bold;
	FONT-SIZE: 1.1em;
	PADDING-BOTTOM: 4px;
	BORDER-LEFT: #ccc 1px solid;
	WIDTH: 100%;
	PADDING-TOP: 4px;
	BORDER-BOTTOM: #ccc 1px solid;
	FONT-FAMILY: Helvetica, Arial, sans-serif
}

#login-page INPUT#authcode {
	BORDER-RIGHT: #ccc 1px solid;
	BORDER-TOP: #ccc 1px solid;
	PADDING-LEFT: 4px;
	FONT-WEIGHT: bold;
	FONT-SIZE: 1.1em;
	PADDING-BOTTOM: 4px;
	BORDER-LEFT: #ccc 1px solid;
	WIDTH: 60%;
	PADDING-TOP: 4px;
	BORDER-BOTTOM: #ccc 1px solid;
	FONT-FAMILY: Helvetica, Arial, sans-serif;
	PADDING-TOP: 4px;
	FONT-WEIGHT: bold;
	FONT-SIZE: 1.1em;
	PADDING-BOTTOM: 4px;
}

.button {
	BORDER-RIGHT: #2d7bb2 2px solid;
	PADDING-RIGHT: 6px;
	BORDER-TOP: #2d7bb2 2px solid;
	PADDING-LEFT: 6px;
	FONT-WEIGHT: bold;
	FONT-SIZE: 0.9em;
	BACKGROUND: #2d7bb2;
	PADDING-BOTTOM: 0.25em;
	MARGIN: 0px;
	BORDER-LEFT: #2d7bb2 2px solid;
	CURSOR: pointer;
	COLOR: #fff;
	PADDING-TOP: 0.25em;
	BORDER-BOTTOM: #2d7bb2 2px solid;
	FONT-FAMILY: Helvetica, Arial, sans-serif;
	webkit-border-radius: 5px
}

#login-page A.new_password {
	FONT-SIZE: 0.8em;
	MARGIN-LEFT: 10px
}

#page-content {
	PADDING-LEFT: 60px;
	PADDING-BOTTOM: 40px;
	MARGIN: 30px auto;
	WIDTH: 400px;
}

.code {
	font-family: Arial;
	font-style: italic;
	color: Red;
	border: 0;
	padding: 2px 3px;
	letter-spacing: 3px;
	font-weight: bolder;
}

.unchanged {
	border: 0;
}
</style>
		<script type="text/javascript">
		


function validate() {
	var reg = /^[u4E00-u9FA5]+$/;
	var username =document.getElementById("username").value;
	if(username==""||username==null){
	alert("请输入帐号!");
	document.form1.username.focus();
	return false;
	}
	var password1=document.getElementById("password1").value;
	if(password1==""||password1==null){
	alert("请输入密码!");
	document.form1.password1.focus();
	return false;
	}
	var password2=document.getElementById("password2").value;
	if(password2==""||password2==null){
	alert("请再次输入密码!");
	document.form1.password2.focus();
	return false;
	}
	if(password1!=password2){
		alert("你两次输入密码不相等!");
		document.form1.password1.focus();
		return false;
	}
	var authcode = document.getElementById("authcode").value;
	if (authcode==""||authcode==null) {
		alert("请输入验证码!");
		document.form1.authcode.focus();
		return false;
	}else if(authcode!=code){
		alert("验证码输入错误!");
		createCode();//刷新验证码
		document.form1.authcode.focus();
		return false;
	}else if(reg.test(username)){
		alert("帐号不能包含中文!");
		document.form1.username.focus();
       	return false;
	}else if(username.length<6){
		alert("帐号至少为6位!");
		document.form1.username.focus();
       	return false;
	}else if(username.length>21){
		alert("帐号不宜太长!");
		document.form1.username.focus();
       	return false;
	}else if(password1.length<6){
		alert("密码至少为6位!");
		document.form1.password1.focus();
       	return false;
	}else if(password1.length>20){
		alert("密码不宜太长!");
		document.form1.password1.focus();
       	return false;
	}
	return true; 
	
}
 function cls(){
                with (event.srcElement)
                if(value=="请输入右边的数字或字母")
                    value="";
            }
            function res(){
            	 with (event.srcElement)
                if(value=="")
                	value="请输入右边的数字或字母";     
            }
</script>
	</head>

	<body onload="createCode()">

		<div id="main_container">
			<!--top  -->
			<jsp:include page="top.jsp" flush="true"></jsp:include>

			<!--main  -->
			<div id="main_content">

				<div id="middle_banner">
					<div class="middle_banner_content">
						<img src="<%=path%>/images/banner_content.png" alt="" title=""
							width="417" height="142" />
					</div>
				</div>


				<div id="left_content">
					
					
					<h1>用户注册:</h1>
					

					<div id="page-content">
						<div id="login-page">
							<form name="form1" action="register" method="post"
								onsubmit="return validate()">
								<div id="normal-login">
									<c:if test="${requestScope.WARN ne null}">
										<p>
											<img src="images/icons/cross.png"/>&nbsp;&nbsp;<font color="red">${requestScope.WARN }</font>
										</p>
									</c:if>
									<p>
										<label>
											帐号
										</label>
										<br />
										<input type="text" id="username" name="username"/>
									</p>
									<p>
										<label>
											密码
										</label>
										<br />
										<input id="password1" type="password" name="password1" />
									</p>
									<p>
										<label for="password">
											密码
										</label>
										<br />
										<input id="password2" type="password" name="password2" />
									</p>

									<p>
										<label>
											验证
										</label>
										<br />
										<input id="authcode" type="text" value="请输入右边的数字或字母" onfocus="cls()" onblur="res()" style="color: #ccc;"/>
										<input type="text" onclick="createCode()" readonly="readonly"
											id="checkCode" class="unchanged" />
									</p>

								</div>
								<p>
									<input class="button" type="submit" value="注册" name="commit" />
									<a class="new_password" href="default.jsp">返回首页</a>
								</p>
							</form>
						</div>
					</div>
				</div>
				<!-- foot -->
				<jsp:include page="foot.jsp" flush="true"></jsp:include>
			</div>

		</div>
	</body>
</html>
